<template>
  <div class="snatchRecord">
    <div class="snatchRecordT">
      <p @click="$router.go(-1)">
        <img src="../assets/leftl.png" />
      </p>
      <p>抢单记录</p>
      <p></p>
    </div>
    <div>
      <div class="recordInfo wn" v-for="(list,index) in recordData" :key="index">
        <div v-if="list.decoration_release_id_link" class="flex">
          <p class="ac">
            <img :src="'http://sza.hzlyzhenzhi.com/' + list.decoration_release_id_link.images[0]" />
          </p>
          <p class="col">
            <span>{{list.decoration_release_id_link.name}}</span>
            <span>
            <img src="../assets/phoner.png" />{{list.decoration_release_id_link.phone}}
          </span>
            <span>
            <img src="../assets/dw.png" />{{list.decoration_release_id_link.address}}
          </span>
          </p>
          <p>{{list.decoration_release_id_link.created_at}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recordData: null
    }
  },
  created() {
    this.$parent.showTabbar = false;
    this.$axios({
      url: 'release/join',
      method: 'get'
    }).then(res => {
      console.log(res)
      if (res.data.code === 200) {
        this.recordData = res.data.data
      }
    })
  },
  methods: {
    
  }
};
</script>

<style lang='less'>
.snatchRecordT {
  padding: 10px 0;
  display: flex;
  background: linear-gradient(0deg, #e91a0e 0%, #f54822 100%),
    linear-gradient(0deg, #e40805 0%, #e40a07 100%);
  p {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  p:nth-child(1),
  p:nth-child(3) {
    width: 10%;
    img {
      width: 29%;
    }
  }
  p:nth-child(2) {
    width: 80%;
    color: #ffffff;
    font-size: 16px;
  }
}
.recordInfo {
  div {
    flex-wrap: nowrap;
    background: #fff;
    box-shadow: 2px 2px 1px #eee;
    border-radius: 5px;
    margin-top: 10px;
    padding: 10px 0;
    p:nth-child(1) {
      padding-left: 7px;
      display: flex;
      width: 16%;
      img {
        width: 100%;
        height: 4rem;
      }
    }
    p:nth-child(2) {
      display: flex;
      width: 54%;
      padding-left: 5px;
      span{
        padding-bottom: 5px;
      }
      span:nth-child(1){
        color: #363636;
        font-size: 16px;
        font-weight: bold;
      }
      span:nth-child(2){
        color: #363636;
        font-weight: 550;
      }
      span:nth-child(3){
        font-size: 13px;
      }
      img{
        width: 6%;
        height: 1rem;
        padding-right: 1px;
      }
    }
    p:nth-child(3) {
      display: flex;
      flex-wrap: wrap;
      width: 25%;
    color: #a7a2a2;
      font-size: 13px;
    }
  }
}
</style>